<template>
    <view class="page" style="background-image: url('https://morgan.dingxians.cn/static/climbing/bg.png');">
        <!-- <scroll-view scroll-y style="width: 100%; height: 4240rpx;position: relative;"> -->
        <u-sticky>
            <hedsty :headCentext="'攀登'" :backImg="'https://morgan.dingxians.cn/static/climbing/back.png'"></hedsty>
        </u-sticky>
        <view class="yangshi1_box" style="background-image: url('https://morgan.dingxians.cn/static/climbing/1.png');">
        </view>
        <view class="yangshi2_box" style="background-image: url('https://morgan.dingxians.cn/static/climbing/2.png');">
        </view>
        <view class="yangshi3_box" style="background-image: url('https://morgan.dingxians.cn/static/climbing/3.png');">
        </view>
        <view class="diyiceng_box" @click="$router('/uniPage/bingDetail?id=' + alimbList[0].id)">
            <view class="dizuo_box"
                :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[0].is_lock != 0 ? '11' : '011') + '.png)' }">
                <view class="cengshu_box" v-if="alimbList[0].is_lock != 0"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name1.png');">第一层</view>
                <view class="cengshu1_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name01.png');" v-else>
                    <text style="color:#fff;">待解锁</text><text style="color:#81EFFF;">({{ alimbList[0].price }}元素)</text>
                </view>
            </view>
            <!-- <view class="jinru_box" style="background-image: url('https://morgan.dingxians.cn/static/climbing/jinru.png');">进入</view> -->
            <view class="guantu_box">
                <image src="https://morgan.dingxians.cn/static/patatupian/01.png" v-if="alimbList[0].is_lock == 0"
                    mode="scaleToFill" />
                <image src="https://morgan.dingxians.cn/static/patatupian/1.png" v-else mode="scaleToFill" />
                <view class="suo_box" v-if="alimbList[0].is_lock == 0"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/suozi.png');"></view>
            </view>
        </view>
        <view class="yangshi4_box"
            :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[1].is_lock != 0 ? '3' : '03') + '.png)' }">
        </view>
        <view class="dierceng_box" @click="$router('/uniPage/bingDetail?id=' + alimbList[1].id)">
            <view class="dizuo_box"
                :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[1].is_lock != 0 ? '11' : '011') + '.png)' }">
                <view class="cengshu_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name1.png');"
                    v-if="alimbList[1].is_lock != 0">第二层</view>
                <view class="cengshu1_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name01.png');" v-else>
                    <text style="color:#fff;">待解锁</text><text style="color:#81EFFF;">({{ alimbList[1].price }}元素)</text>
                </view>
            </view>
            <!-- <view class="jinru_box" style="background-image: url('https://morgan.dingxians.cn/static/climbing/jinru.png');">进入</view> -->
            <view class="guantu_box">
                <image src="https://morgan.dingxians.cn/static/patatupian/02.png" v-if="alimbList[1].is_lock == 0"
                    mode="scaleToFill" />
                <image src="https://morgan.dingxians.cn/static/patatupian/2.png" v-else mode="scaleToFill" />
                <view class="suo_box" v-if="alimbList[1].is_lock == 0"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/suozi.png');"></view>
            </view>
        </view>
        <view class="yangshi5_box"
            :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[2].is_lock != 0 ? '3' : '03') + '.png)' }">
        </view>
        <view class="disanceng_box" @click="$router('/uniPage/bingDetail?id=' + alimbList[2].id)">
            <view class="dizuo_box"
                :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[2].is_lock != 0 ? '11' : '011') + '.png)' }">
                <view class="cengshu_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name1.png');"
                    v-if="alimbList[2].is_lock != 0">第三层</view>
                <view class="cengshu1_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name01.png');" v-else>
                    <text style="color:#fff;">待解锁</text><text style="color:#81EFFF;">({{ alimbList[2].price }}元素)</text>
                </view>
            </view>
            <!-- <view class="jinru_box" style="background-image: url('https://morgan.dingxians.cn/static/climbing/jinru.png');">进入</view> -->
            <view class="guantu_box">
                <image src="https://morgan.dingxians.cn/static/patatupian/03.png" v-if="alimbList[2].is_lock == 0"
                    mode="scaleToFill" />
                <image src="https://morgan.dingxians.cn/static/patatupian/3.png" v-else mode="scaleToFill" />
                <view class="suo_box" v-if="alimbList[2].is_lock == 0"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/suozi.png');"></view>
            </view>
        </view>
        <view class="yangshi6_box"
            :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[3].is_lock != 0 ? '3' : '03') + '.png)' }">
        </view>
        <view class="disiceng_box" @click="$router('/uniPage/bingDetail?id=' + alimbList[3].id)">
            <view class="dizuo_box"
                :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[3].is_lock != 0 ? '11' : '011') + '.png)' }">
                <view class="cengshu_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name1.png');"
                    v-if="alimbList[3].is_lock != 0">第四层</view>
                <view class="cengshu1_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name01.png');" v-else>
                    <text style="color:#fff;">待解锁</text><text style="color:#81EFFF;">({{ alimbList[3].price }}元素)</text>
                </view>
            </view>
            <!-- <view class="jinru_box" style="background-image: url('https://morgan.dingxians.cn/static/climbing/jinru.png');">进入</view> -->
            <view class="guantu_box">
                <image src="https://morgan.dingxians.cn/static/patatupian/04.png" v-if="alimbList[3].is_lock == 0"
                    mode="scaleToFill" />
                <image src="https://morgan.dingxians.cn/static/patatupian/4.png" v-else mode="scaleToFill" />
                <view class="suo_box" v-if="alimbList[3].is_lock == 0"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/suozi.png');"></view>
            </view>
        </view>
        <view class="yangshi7_box"
            :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[4].is_lock != 0 ? '3' : '03') + '.png)' }">
        </view>
        <view class="diwuceng_box" @click="$router('/uniPage/bingDetail?id=' + alimbList[4].id)">
            <view class="dizuo_box"
                :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[4].is_lock != 0 ? '11' : '011') + '.png)' }">
                <view class="cengshu_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name1.png');"
                    v-if="alimbList[4].is_lock != 0">第五层</view>
                <view class="cengshu1_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name01.png');" v-else>
                    <text style="color:#fff;">待解锁</text><text style="color:#81EFFF;">({{ alimbList[4].price }}元素)</text>
                </view>
            </view>
            <!-- <view class="jinru_box" style="background-image: url('https://morgan.dingxians.cn/static/climbing/jinru.png');">进入</view> -->
            <view class="guantu_box">
                <image src="https://morgan.dingxians.cn/static/patatupian/05.png" v-if="alimbList[4].is_lock == 0"
                    mode="scaleToFill" />
                <image src="https://morgan.dingxians.cn/static/patatupian/5.png" v-else mode="scaleToFill" />
                <view class="suo_box" v-if="alimbList[4].is_lock == 0"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/suozi.png');"></view>
            </view>
        </view>
        <view class="yangshi8_box"
            :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[5].is_lock != 0 ? '3' : '03') + '.png)' }">
        </view>
        <view class="diliuceng_box" @click="$router('/uniPage/bingDetail?id=' + alimbList[5].id)">
            <view class="dizuo_box"
                :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[5].is_lock != 0 ? '11' : '011') + '.png)' }">
                <view class="cengshu_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name1.png');"
                    v-if="alimbList[5].is_lock != 0">第六层</view>
                <view class="cengshu1_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name01.png');" v-else>
                    <text style="color:#fff;">待解锁</text><text style="color:#81EFFF;">({{ alimbList[5].price }}元素)</text>
                </view>
            </view>
            <!-- <view class="jinru_box" style="background-image: url('https://morgan.dingxians.cn/static/climbing/jinru.png');">进入</view> -->
            <view class="guantu_box">
                <image src="https://morgan.dingxians.cn/static/patatupian/06.png" v-if="alimbList[5].is_lock == 0"
                    mode="scaleToFill" />
                <image src="https://morgan.dingxians.cn/static/patatupian/6.png" v-else mode="scaleToFill" />
                <view class="suo_box" v-if="alimbList[5].is_lock == 0"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/suozi.png');"></view>
            </view>
        </view>
        <view class="yangshi9_box"
            :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[6].is_lock != 0 ? '3' : '03') + '.png)' }">
        </view>
        <view class="diqiceng_box" @click="$router('/uniPage/bingDetail?id=' + alimbList[6].id)">
            <view class="dizuo_box"
                :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[6].is_lock != 0 ? '11' : '011') + '.png)' }">
                <view class="cengshu_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name1.png');"
                    v-if="alimbList[6].is_lock != 0">第七层</view>
                <view class="cengshu1_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name01.png');" v-else>
                    <text style="color:#fff;">待解锁</text><text style="color:#81EFFF;">({{ alimbList[6].price }}元素)</text>
                </view>
            </view>
            <!-- <view class="jinru_box" style="background-image: url('https://morgan.dingxians.cn/static/climbing/jinru.png');">进入</view> -->
            <view class="guantu_box">
                <image src="https://morgan.dingxians.cn/static/patatupian/07.png" v-if="alimbList[6].is_lock == 0"
                    mode="scaleToFill" />
                <image src="https://morgan.dingxians.cn/static/patatupian/7.png" v-else mode="scaleToFill" />
                <view class="suo_box" v-if="alimbList[6].is_lock == 0"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/suozi.png');"></view>
            </view>
        </view>
        <!-- <view class="yangshi10_box"
            :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[7].is_lock != 0 ? '3' : '03') + '.png)' }">
        </view>
        <view class="dibaceng_box" @click="$router('/uniPage/bingDetail?id=' + alimbList[7].id)">
            <view class="dizuo_box"
                :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[7].is_lock != 0 ? '11' : '011') + '.png)' }">
                <view class="cengshu_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name1.png');"
                    v-if="alimbList[7].is_lock != 0">第八层</view>
                <view class="cengshu1_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name01.png');" v-else>
                    <text style="color:#fff;">待解锁</text><text style="color:#81EFFF;">({{ alimbList[7].price }}元素)</text></view>
            </view>
            <view class="guantu_box">

                <image src="https://morgan.dingxians.cn/static/patatupian/08.png" v-if="alimbList[7].is_lock == 0" mode="scaleToFill" />
                <image src="https://morgan.dingxians.cn/static/patatupian/8.png" v-else mode="scaleToFill" />
                <view class="suo_box" v-if="alimbList[7].is_lock == 0"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/suozi.png');"></view>
            </view>
        </view>

        <view class="yangshi11_box"
            :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[8].is_lock != 0 ? '3' : '03') + '.png)' }">
        </view>
        <view class="dijiuceng_box" @click="$router('/uniPage/bingDetail?id=' + alimbList[8].id)">
            <view class="dizuo_box"
                :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/' + (alimbList[8].is_lock != 0 ? '11' : '011') + '.png)' }">
                <view class="cengshu_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name1.png');"
                    v-if="alimbList[8].is_lock != 0">第九层</view>
                <view class="cengshu1_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/name01.png');" v-else>
                    <text style="color:#fff;">待解锁</text><text style="color:#81EFFF;">({{ alimbList[8].price }}元素)</text></view>
            </view>
            <view class="guantu_box">
                <image src="https://morgan.dingxians.cn/static/patatupian/09.png" v-if="alimbList[8].is_lock == 0" mode="scaleToFill" />
                <image src="https://morgan.dingxians.cn/static/patatupian/9.png" v-else mode="scaleToFill" />
                <view class="suo_box" v-if="alimbList[8].is_lock == 0"
                    style="background-image: url('https://morgan.dingxians.cn/static/climbing/suozi.png');"></view>
            </view>
        </view> -->
        <view class="yangshi12_box"
            :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/climbing/03.png)' }"></view>
        <!-- </scroll-view> -->
        <view class="cebianniu_box1" @click="getclimbTowers()">
            <image src="https://morgan.dingxians.cn/static/climbing/shuaxin.png" mode="scaleToFill" />
        </view>
        <view class="cebianniu_box4" @click="rulePup">
            <image src="https://morgan.dingxians.cn/static/climbing/guize.png" mode="scaleToFill" />
        </view>
        <view class="cebianniu_box5" v-if="bangList.length > 0">
            <view class="biaoti">排行榜</view>
            <scroll-view scroll-y style="width:100%; height:230rpx;">
                <view class="dange_paihang_box" v-for="i,s in bangList" :key="s">
                    <view class="left_pep_name_box">{{i.nickname}}</view>
                    <view class="right_pep_num_box">{{ i.level_id }}</view>
                </view>
            </scroll-view>
        </view>


        <rule :bgImg="'https://morgan.dingxians.cn/static/3.png'" :bgTitle="'https://morgan.dingxians.cn/static/7.png'"
            :gbImg="'https://morgan.dingxians.cn/static/6.png'" :rulecontent="rulecontent" :ruleShow="ruleShow"
            @handlePopup="handlePopup"></rule>
    </view>
</template>
<script>
import hedsty from '../components/hedsty.vue'
import rule from '../components/rule.vue'
export default {
    components: {
        hedsty, rule
    },
    data() {
        return {
            flag: false,
            outpost: 3,
            alimbList: [
                {
                    id: '',
                    is_lock: 0,
                    price: ''
                },
                {
                    id: '',
                    is_lock: 0,
                    price: ''
                },
                {
                    id: '',
                    is_lock: 0,
                    price: ''
                },
                {
                    id: '',
                    is_lock: 0,
                    price: ''
                },
                {
                    id: '',
                    is_lock: 0,
                    price: ''
                },
                {
                    id: '',
                    is_lock: 0,
                    price: ''
                },
                {
                    id: '',
                    is_lock: 0,
                    price: ''
                },
                {
                    id: '',
                    is_lock: 0,
                    price: ''
                },
                {
                    id: '',
                    is_lock: 0,
                    price: ''
                },
                {
                    id: '',
                    is_lock: 0,
                    price: ''
                },

            ],
            ruleShow: false,
            rulecontent: '',
            bangList:[]
        }
    },
    onLoad() {

    },
    onShow() {
        this.getclimbTowers()
    },
    methods: {
        rulePup() {
            this.$Request.get(this.$api.agreen.contents + `/climbing`).then(res => {
                this.rulecontent = res.data.content
                this.ruleShow = true
            })
        },
        handlePopup() {
            this.ruleShow = false
        },
        getclimbTowers() {
            this.$Request.get(this.$api.index.climbTowers).then((res) => {
                if (res.code == 200) {
                    console.log(res)
                    this.alimbList = res.data.data
                    this.bangList = res.data.ranking_list
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 3470rpx;
    background-size: 100% 100%;
    position: relative;

    .yangshi1_box {
        width: 150rpx;
        height: 113rpx;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 45rpx;
    }

    .yangshi2_box {
        width: 170rpx;
        height: 128rpx;
        background-size: 100% 100%;
        position: absolute;
        left: 72rpx;
        bottom: 168rpx;

    }

    .yangshi3_box {

        width: 200rpx;
        height: 150rpx;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 321rpx;
    }

    .diyiceng_box {
        height: 452rpx;
        width: 588rpx;
        position: absolute;
        right: 0;
        bottom: 408rpx;

        .dizuo_box {
            position: absolute;
            width: 420rpx;
            height: 298rpx;
            bottom: 0;
            right: 0;
            background-size: 100% 100%;

            .cengshu_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: text1;
                font-weight: bold;
                font-size: 32rpx;
                color: #30A1E8;
                line-height: 60rpx;
                font-style: italic;
                text-align: center;
            }

            .cengshu1_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 60rpx;
                text-align: center;
            }
        }

        .jinru_box {
            width: 318rpx;
            height: 79rpx;
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            bottom: 112rpx;
            font-family: text1;
            font-weight: bold;
            font-size: 28rpx;
            color: #30A1E8;
            line-height: 79rpx;
            box-sizing: border-box;
            padding-left: 95rpx;
        }

        .guantu_box {
            position: absolute;
            width: 286rpx;
            height: 300rpx;
            //border: 1rpx solid #ccc;
            top: 0;
            right: 60rpx;

            image {
                width: 100%;
                height: 100%;
            }

            .suo_box {
                width: 30rpx;
                height: 40rpx;
                background-size: 100% 100%;
                position: absolute;
                bottom: 0;
                top: 0;
                right: 0;
                left: 0;
                margin: auto;
            }
        }
    }

    .yangshi4_box {
        width: 150rpx;
        height: 113rpx;
        background-size: 100% 100%;
        position: absolute;
        bottom: 711rpx;
        left: 257rpx;
    }

    .dierceng_box {
        height: 452rpx;
        width: 588rpx;
        position: absolute;
        left: 0;
        bottom: 809rpx;

        .dizuo_box {
            position: absolute;
            width: 420rpx;
            height: 298rpx;
            bottom: 0;
            left: 0;
            background-size: 100% 100%;

            .cengshu_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: text1;
                font-weight: bold;
                font-size: 32rpx;
                color: #30A1E8;
                line-height: 60rpx;
                font-style: italic;
                text-align: center;
            }

            .cengshu1_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 60rpx;
                text-align: center;
            }
        }

        .jinru_box {
            width: 318rpx;
            height: 79rpx;
            background-size: 100% 100%;
            position: absolute;
            right: 0;
            bottom: 112rpx;
            font-family: text1;
            font-weight: bold;
            font-size: 28rpx;
            color: #30A1E8;
            line-height: 79rpx;
            box-sizing: border-box;
            padding-left: 95rpx;
        }

        .guantu_box {
            position: absolute;
            width: 286rpx;
            height: 300rpx;
            //border: 1rpx solid #ccc;
            top: 0;
            left: 60rpx;

            image {
                width: 100%;
                height: 100%;
            }

            .suo_box {
                width: 30rpx;
                height: 40rpx;
                background-size: 100% 100%;
                position: absolute;
                bottom: 0;
                top: 0;
                right: 0;
                left: 0;
                margin: auto;
            }
        }
    }

    .yangshi5_box {

        width: 170rpx;
        height: 128rpx;
        background-size: 100% 100%;
        position: absolute;
        left: 307rpx;
        bottom: 1101rpx;
    }

    .disanceng_box {
        height: 452rpx;
        width: 588rpx;
        position: absolute;
        right: 0;
        bottom: 1218rpx;

        .dizuo_box {
            position: absolute;
            width: 420rpx;
            height: 298rpx;
            bottom: 0;
            right: 0;
            background-size: 100% 100%;

            .cengshu_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: text1;
                font-weight: bold;
                font-size: 32rpx;
                color: #30A1E8;
                line-height: 60rpx;
                font-style: italic;
                text-align: center;
            }

            .cengshu1_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 60rpx;
                text-align: center;
            }
        }

        .jinru_box {
            width: 318rpx;
            height: 79rpx;
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            bottom: 112rpx;
            font-family: text1;
            font-weight: bold;
            font-size: 28rpx;
            color: #30A1E8;
            line-height: 79rpx;
            box-sizing: border-box;
            padding-left: 95rpx;
        }

        .guantu_box {
            position: absolute;
            width: 286rpx;
            height: 300rpx;
            //border: 1rpx solid #ccc;
            top: 0;
            right: 60rpx;

            image {
                width: 100%;
                height: 100%;
            }

            .suo_box {
                width: 30rpx;
                height: 40rpx;
                background-size: 100% 100%;
                position: absolute;
                bottom: 0;
                top: 0;
                right: 0;
                left: 0;
                margin: auto;
            }
        }
    }

    .yangshi6_box {
        width: 150rpx;
        height: 113rpx;
        background-size: 100% 100%;
        position: absolute;
        bottom: 1491rpx;
        left: 257rpx;
    }

    .disiceng_box {
        height: 452rpx;
        width: 588rpx;
        position: absolute;
        left: 0;
        bottom: 1589rpx;

        .dizuo_box {
            position: absolute;
            width: 420rpx;
            height: 298rpx;
            bottom: 0;
            left: 0;
            background-size: 100% 100%;

            .cengshu_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: text1;
                font-weight: bold;
                font-size: 32rpx;
                color: #30A1E8;
                line-height: 60rpx;
                font-style: italic;
                text-align: center;
            }

            .cengshu1_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 60rpx;
                text-align: center;
            }
        }

        // .jinru_box {
        //     width: 318rpx;
        //     height: 79rpx;
        //     background-size: 100% 100%;
        //     position: absolute;
        //     left: 0;
        //     bottom: 112rpx;
        //     font-family: text1;
        //     font-weight: bold;
        //     font-size: 28rpx;
        //     color: #30A1E8;
        //     line-height: 79rpx;
        //     box-sizing: border-box;
        //     padding-left: 95rpx;
        // }

        .guantu_box {
            position: absolute;
            width: 286rpx;
            height: 300rpx;
            //border: 1rpx solid #ccc;
            top: 0;
            left: 60rpx;

            image {
                width: 100%;
                height: 100%;
            }

            .suo_box {
                width: 30rpx;
                height: 40rpx;
                background-size: 100% 100%;
                position: absolute;
                bottom: 0;
                top: 0;
                right: 0;
                left: 0;
                margin: auto;
            }
        }
    }


    .yangshi7_box {

        width: 170rpx;
        height: 128rpx;
        background-size: 100% 100%;
        position: absolute;
        left: 307rpx;
        bottom: 1899rpx;
    }

    .diwuceng_box {
        height: 452rpx;
        width: 588rpx;
        position: absolute;
        right: 0;
        bottom: 2014rpx;

        .dizuo_box {
            position: absolute;
            width: 420rpx;
            height: 298rpx;
            bottom: 0;
            right: 0;
            background-size: 100% 100%;

            .cengshu_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: text1;
                font-weight: bold;
                font-size: 32rpx;
                color: #30A1E8;
                line-height: 60rpx;
                font-style: italic;
                text-align: center;
            }

            .cengshu1_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 60rpx;
                text-align: center;
            }
        }

        .jinru_box {
            width: 318rpx;
            height: 79rpx;
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            bottom: 112rpx;
            font-family: text1;
            font-weight: bold;
            font-size: 28rpx;
            color: #30A1E8;
            line-height: 79rpx;
            box-sizing: border-box;
            padding-left: 95rpx;
        }

        .guantu_box {
            position: absolute;
            width: 286rpx;
            height: 300rpx;
            //border: 1rpx solid #ccc;
            top: 0;
            right: 60rpx;

            image {
                width: 100%;
                height: 100%;
            }

            .suo_box {
                width: 30rpx;
                height: 40rpx;
                background-size: 100% 100%;
                position: absolute;
                bottom: 0;
                top: 0;
                right: 0;
                left: 0;
                margin: auto;
            }
        }
    }

    .yangshi8_box {
        width: 150rpx;
        height: 113rpx;
        background-size: 100% 100%;
        position: absolute;
        bottom: 2289rpx;
        left: 257rpx;
    }

    .diliuceng_box {
        height: 452rpx;
        width: 588rpx;
        position: absolute;
        left: 0;
        bottom: 2387rpx;

        .dizuo_box {
            position: absolute;
            width: 420rpx;
            height: 298rpx;
            bottom: 0;
            left: 0;
            background-size: 100% 100%;

            .cengshu_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: text1;
                font-weight: bold;
                font-size: 32rpx;
                color: #30A1E8;
                line-height: 60rpx;
                font-style: italic;
                text-align: center;
            }

            .cengshu1_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 60rpx;
                text-align: center;
            }
        }

        // .jinru_box {
        //     width: 318rpx;
        //     height: 79rpx;
        //     background-size: 100% 100%;
        //     position: absolute;
        //     left: 0;
        //     bottom: 112rpx;
        //     font-family: text1;
        //     font-weight: bold;
        //     font-size: 28rpx;
        //     color: #30A1E8;
        //     line-height: 79rpx;
        //     box-sizing: border-box;
        //     padding-left: 95rpx;
        // }

        .guantu_box {
            position: absolute;
            width: 286rpx;
            height: 300rpx;
            //border: 1rpx solid #ccc;
            top: 0;
            left: 60rpx;

            image {
                width: 100%;
                height: 100%;
            }

            .suo_box {
                width: 30rpx;
                height: 40rpx;
                background-size: 100% 100%;
                position: absolute;
                bottom: 0;
                top: 0;
                right: 0;
                left: 0;
                margin: auto;
            }
        }
    }


    .yangshi9_box {

        width: 170rpx;
        height: 128rpx;
        background-size: 100% 100%;
        position: absolute;
        left: 307rpx;
        bottom: 2697rpx;
    }

    .diqiceng_box {
        height: 452rpx;
        width: 588rpx;
        position: absolute;
        right: 0;
        bottom: 2812rpx;

        .dizuo_box {
            position: absolute;
            width: 420rpx;
            height: 298rpx;
            bottom: 0;
            right: 0;
            background-size: 100% 100%;

            .cengshu_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: text1;
                font-weight: bold;
                font-size: 32rpx;
                color: #30A1E8;
                line-height: 60rpx;
                font-style: italic;
                text-align: center;
            }

            .cengshu1_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 60rpx;
                text-align: center;
            }
        }

        .jinru_box {
            width: 318rpx;
            height: 79rpx;
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            bottom: 112rpx;
            font-family: text1;
            font-weight: bold;
            font-size: 28rpx;
            color: #30A1E8;
            line-height: 79rpx;
            box-sizing: border-box;
            padding-left: 95rpx;
        }

        .guantu_box {
            position: absolute;
            width: 286rpx;
            height: 300rpx;
            //border: 1rpx solid #ccc;
            top: 0;
            right: 60rpx;

            image {
                width: 100%;
                height: 100%;
            }

            .suo_box {
                width: 30rpx;
                height: 40rpx;
                background-size: 100% 100%;
                position: absolute;
                bottom: 0;
                top: 0;
                right: 0;
                left: 0;
                margin: auto;
            }
        }
    }

    .yangshi10_box {
        width: 150rpx;
        height: 113rpx;
        background-size: 100% 100%;
        position: absolute;
        bottom: 3087rpx;
        left: 257rpx;
    }

    .dibaceng_box {
        height: 452rpx;
        width: 588rpx;
        position: absolute;
        left: 0;
        bottom: 3185rpx;

        .dizuo_box {
            position: absolute;
            width: 420rpx;
            height: 298rpx;
            bottom: 0;
            left: 0;
            background-size: 100% 100%;

            .cengshu_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: text1;
                font-weight: bold;
                font-size: 32rpx;
                color: #30A1E8;
                line-height: 60rpx;
                font-style: italic;
                text-align: center;
            }

            .cengshu1_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 60rpx;
                text-align: center;
            }
        }

        // .jinru_box {
        //     width: 318rpx;
        //     height: 79rpx;
        //     background-size: 100% 100%;
        //     position: absolute;
        //     left: 0;
        //     bottom: 112rpx;
        //     font-family: text1;
        //     font-weight: bold;
        //     font-size: 28rpx;
        //     color: #30A1E8;
        //     line-height: 79rpx;
        //     box-sizing: border-box;
        //     padding-left: 95rpx;
        // }

        .guantu_box {
            position: absolute;
            width: 286rpx;
            height: 300rpx;
            //border: 1rpx solid #ccc;
            top: 0;
            left: 60rpx;

            image {
                width: 100%;
                height: 100%;
            }

            .suo_box {
                width: 30rpx;
                height: 40rpx;
                background-size: 100% 100%;
                position: absolute;
                bottom: 0;
                top: 0;
                right: 0;
                left: 0;
                margin: auto;
            }
        }
    }


    .yangshi11_box {

        width: 170rpx;
        height: 128rpx;
        background-size: 100% 100%;
        position: absolute;
        left: 307rpx;
        bottom: 3495rpx;
    }

    .dijiuceng_box {
        height: 452rpx;
        width: 588rpx;
        position: absolute;
        right: 0;
        bottom: 3610rpx;

        .dizuo_box {
            position: absolute;
            width: 420rpx;
            height: 298rpx;
            bottom: 0;
            right: 0;
            background-size: 100% 100%;

            .cengshu_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: text1;
                font-weight: bold;
                font-size: 32rpx;
                color: #30A1E8;
                line-height: 60rpx;
                font-style: italic;
                text-align: center;
            }

            .cengshu1_box {
                position: absolute;
                width: 238rpx;
                height: 60rpx;
                background-size: 100% 100%;
                bottom: 85rpx;
                right: 0;
                left: 0;
                margin: auto;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 60rpx;
                text-align: center;
            }
        }

        .jinru_box {
            width: 318rpx;
            height: 79rpx;
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            bottom: 112rpx;
            font-family: text1;
            font-weight: bold;
            font-size: 28rpx;
            color: #30A1E8;
            line-height: 79rpx;
            box-sizing: border-box;
            padding-left: 95rpx;
        }

        .guantu_box {
            position: absolute;
            width: 286rpx;
            height: 300rpx;
            //border: 1rpx solid #ccc;
            top: 0;
            right: 60rpx;

            image {
                width: 100%;
                height: 100%;
            }

            .suo_box {
                width: 30rpx;
                height: 40rpx;
                background-size: 100% 100%;
                position: absolute;
                bottom: 0;
                top: 0;
                right: 0;
                left: 0;
                margin: auto;
            }
        }
    }

    .yangshi12_box {

        width: 170rpx;
        height: 128rpx;
        background-size: 100% 100%;
        position: absolute;
        left: 307rpx;
        bottom: 3301rpx;
    }

    .cebianniu_box1 {
        width: 109rpx;
        height: 122rpx;
        position: fixed;
        left: 30rpx;
        bottom: 919rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .cebianniu_box4 {
        width: 109rpx;
        height: 122rpx;
        position: fixed;
        z-index: 3;
        left: 30rpx;
        bottom: 768rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .cebianniu_box5 {
        position: fixed;
        right: 0;
        bottom: 744rpx;
        height: 122rpx;
        width: 200rpx;
        height: 300rpx;
        background: rgba(28, 5, 4, .5);
        border-radius: 10rpx 0 0 10rpx;
        border: 1rpx solid rgba(129, 239, 255, 1);

        .biaoti {
            width: 100%;
            height: 60rpx;
            font-family: DouFont-PinboGB-Flash;
            font-weight: normal;
            font-size: 30rpx;
            color: rgba(129, 239, 255, 1);
            line-height: 60rpx;
            text-align: center;
            margin-bottom: 5rpx;
        }

        .dange_paihang_box {
            width: 100%;
            height: 60rpx;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 10rpx;

            .left_pep_name_box {
                width: 65%;
                height: 100%;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 60rpx;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                text-align: left;
            }

            .right_pep_num_box {
                width: 20%;
                height: 100%;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: rgba(129, 239, 255, 1);
                line-height: 60rpx;
                text-align: right;

            }
        }
    }
}
</style>
